<template>
  <div class="container">
    <!--    <div class="message">{{title}}</div>-->
    <div class="background">
      <div class="userinfo">
        <img class="userinfo-avatar" v-bind:src="userInfo.avatarUrl" mode="aspectFill" alt="头像"/>
        <p class="userinfo-nickname">{{userInfo.nickName}}</p>
      </div>

      <button class="startStyle" @click="clickToStart">开始</button>
      <button class="rankStyle" @click="clickToRankList">排行榜</button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: 'index page',
        userInfo: ''
      }
    },

    onLoad () {
      const self = this
      wx.getUserInfo({
        success (res) {
          self.userInfo = res.userInfo
        }
      })
    },
    /**
     * 功能：路由设置，分别导向难度选择页面（level）和排行榜页面（rank)
     */
    methods: {
      clickToStart () {
        wx.navigateTo({
          url: '/pages/level/main'
        })
      },
      clickToRankList () {
        wx.navigateTo({
          url: '/pages/rank/main'
        })
      }
    }
  }
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .background {
    background-image:url('');
    width: 100%;
    height: 1334rpx;
    background-repeat: no-repeat;
  }

  .startStyle {
    width: 475rpx;
    top: 300rpx;
    border-radius: 50rpx;
    color: #2abee9;
    font-size: 40rpx;
  }

  .rankStyle {
    width: 475rpx;
    top: 335rpx;
    border-radius: 50rpx;
    color: #2abee9;
    font-size: 40rpx;
  }

  .message {
    color: red;
    padding: 10px;
    text-align: center;
  }

  .userinfo-avatar {
    width: 200rpx;
    height: 200rpx;
    margin: 270rpx 0 0 0;
    border-radius: 150rpx;
  }

  .userinfo-nickname {
    font-weight: bold;
    font-size: 50rpx;
    margin: 20rpx 0 0 0;
  }

  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
